<template>
  <div>
    <div class="head">
      <div><SwitchButton /></div>
      <div class="cnter">播放器</div>
      <div><MoreFilled /></div>
    </div>
    <div class="body">
      <div>
        <input type="range" />
      </div>
    </div>
    <div class="foot">
      <div class="ctrl-process">
        <input type="range" :value="process" @input="change" min="0" max="100" />
      </div>
      <div class="ctrl-time">
        <span>{{ formatTime(cuuentTime) }}</span>
        <span>{{ formatTime(totalTime) }}</span>
      </div>
      <div class="ctrl-btns">
        <div>
          <CaretLeft />
        </div>
        <div @click="togglePlay" class="cnter">
          <VideoPlay v-if="playstaus" />
          <VideoPause v-else />
        </div>
        <div>
          <CaretRight />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SwitchButton, VideoPause, VideoPlay, CaretLeft, CaretRight, MoreFilled } from "@element-plus/icons-vue";
const totalTime = ref(0);
const cuuentTime = ref(0);

const audio = new Audio();

audio.addEventListener("durationchange", () => {
  totalTime.value = audio.duration;
});
audio.addEventListener("loadeddata", () => {
  totalTime.value = audio.duration;
});
const process = ref(0);
const playstaus = ref(false);
const togglePlay = () => {
  playstaus.value = !playstaus.value;
};
const change = (e: any) => {
  const { duration } = audio;
  if (e.target.value) {
    audio.currentTime = (e.target.value / 100) * duration;
  }
};
const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
};
</script>

<style lang="less" scoped>
.foot {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  .ctrl-btns {
    display: flex;
    align-items: center;
    & > div {
      flex: 1;
      height: 50px;
      display: flex;
      justify-content: center;
    }
    .cnter {
      height: 80px;
    }
  }
  .ctrl-process {
    margin: 0 2vw;
    input {
      width: 100%;
      --size: 20px;
      cursor: pointer;
      appearance: none;
      background: none;
      overflow: hidden;
      height: var(--size);
    }
    input[type="range"]::-webkit-slider-thumb {
      aspect-ratio: 1;
      border-radius: 50%;
      height: var(--size);
      box-shadow: 0 0 0 var(--size) inset blue;
      border-image: linear-gradient(90deg, blue 50%, #ababab 0) 0 1 / 9px 100vw/0 calc(100vw + 2px);
      appearance: none;
    }
  }
  .ctrl-time {
    display: flex;
    margin: 0 2vw;
    justify-content: space-between;
  }
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  height: 40px;
  gap: 2vw;
  & > div {
    display: flex;
    align-items: center;
    height: 20px;
    width: 20px;
  }
  .cnter {
    flex: 1;
  }
}
</style>
